<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { useCustomerStore } from '@/store';

  const list = ref<any>([]);
  const customerStore = useCustomerStore();
  const searchForm = ref<any>({});
  const emit = defineEmits(['select']);
  const modalVisible = ref(false);

  async function fetchList() {
    list.value = await customerStore.getCustomers(searchForm.value);
  }

  onMounted(async () => {
    fetchList();
  });

  function handleSelect(record: any) {
    emit('select', record);
  }

  defineExpose({
    show: function () {
      modalVisible.value = true;
    },
    hide: function () {
      modalVisible.value = false;
    },
  });
</script>

<template>
  <a-modal :visible="modalVisible" title="选择客户" @cancel="modalVisible = false" :footer="false">
    <a-table :data="list">
      <template #columns>
        <a-table-column title="编号" :width="80" data-index="id"></a-table-column>
        <a-table-column title="客户名称" data-index="companyName"></a-table-column>
        <a-table-column title="操作" :width="120">
          <template #cell="{ record }">
            <a-space>
              <a-button type="primary" @click="handleSelect(record)" size="small">选择</a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </a-modal>
</template>
